<template>
    <!-- 浮动气泡按钮 -->
    <van-floating-bubble
        v-model:offset="offset"
        axis="xy"
        icon="chat"
        magnetic="x"
        @click="toggleChatPopup"
    />

    <!-- 客服小聊天框 -->
    <van-popup
        :style="popupStyle"
        :close-on-click-overlay="false"
        round
        v-model:show="showChatPopup"
        closeable
        @closed="close"
    >
        <div class="chat-container">
            <van-sticky>
                <van-nav-bar title="客服" @click-left="Clean">
                    <!-- 使用插槽添加 Logo -->
                    <template #left>
                        <van-icon name="delete-o" size="18" color="#222" />
                        <span>清空</span>
                    </template>
                </van-nav-bar>
            </van-sticky>

            <!-- chatWindow 指向聊天窗口的 DOM 元素 -->
            <div class="chat-window" ref="chatWindow">
                <div
                    v-for="(message, index) in messages"
                    :key="index"
                    class="message"
                    :class="{ 'message-self': message.isSelf }"
                >
                    <img
                        v-if="!message.isSelf"
                        :src="message.avatar"
                        class="avatar"
                        alt="Avatar"
                    />
                    <div
                        class="message-content"
                        :class="{ 'message-content-self': message.isSelf }"
                    >
                        {{ message.content }}
                    </div>
                    <img
                        v-if="message.isSelf"
                        :src="message.avatar"
                        class="avatar"
                        alt="Avatar"
                    />
                </div>
            </div>
            <!-- 输入框 -->
            <div class="input-area">
                <van-field
                    v-model="newMessage"
                    rows="1"
                    :autosize="{ maxHeight: 70 }"
                    type="textarea"
                    placeholder="请输入消息"
                    show-word-limit
                    @keydown="handleKeydown"
                    style="flex-grow: 1"
                />
                <!-- 发送按钮 -->
                <van-button
                    type="primary"
                    @click="sendMessage"
                    class="send-button"
                >
                    发送
                </van-button>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
// useWindowSize 获取浏览器窗口的视口宽度和高度，并在窗口大小变化时自动更新
import { useWindowSize } from "@vant/use";

// 获取当前实例和业务相关属性
const { proxy } = getCurrentInstance();
const business = proxy.$business;

const showChatPopup = ref(false); // 控制弹窗显示与否
const chatWindow = ref(null); // 这是一个引用（ref），指向聊天窗口的 DOM 元素
const newMessage = ref(""); // 当前输入的消息
const messages = ref([]); // 消息列表
const { width, height } = useWindowSize(); // 使用 useWindowSize 钩子获取窗口大小

// 客服头像路径
const chatAvatar = "/assets/images/avatar.jpg";

// 弹窗样式定义
const popupStyle = {
    width: width.value-50+'px',
    height: height.value-100+'px',
    overflow: "hidden",
};

// 气泡位置偏移量
const offset = ref({ x: -1, y: -1 });

// 生命周期钩子：组件挂载时初始化气泡位置并启动定时器
onMounted(() => {
    offset.value.y = height.value - 200;
    CountDown();
    console.log("🚀 ~ file: Chat.vue:107 ~ width:", width.value);
});

// 生命周期钩子：组件卸载时清除定时器
onUnmounted(() => {
    clearInterval(T);
    T = null;
});

let T; // 定时器引用

// 定时器函数：设置气泡位置使其向右缩进屏幕，露出一半
const CountDown = () => {
    T = setTimeout(() => {
        offset.value.x = width.value - 30; // 设置气泡位置 动态-30 适应不同屏幕
        console.log("🚀 ~ file: 定时器:", offset.value.x);
    }, 8000);
};

// 处理回车发送消息，Shift + 回车换行
const handleKeydown = (event) => {
    if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault(); // 防止默认的换行行为
        sendMessage(); // 发送消息
    }
};

// 发送消息到后台，并更新聊天窗口
const sendMessage = async () => {
    const BusinessMsg = newMessage.value.trim();
    if (!BusinessMsg) return; // 如果输入消息为空，不发送

    addMessage(BusinessMsg, true); // 添加用户消息到消息列表
    scrollToBottom(); // 滚动到底部

    console.log("User message added:", BusinessMsg);
    try {
        const params = { msg: BusinessMsg };
        newMessage.value = ""; // 清空输入框
        const result = await proxy.$http.post({ url: "/chat/index", params });

        const replyContent = result.data.content || "收到消息"; // 获取客服回复内容

        addMessage(replyContent, false); // 发送客服回复到聊天窗口
        scrollToBottom(); // 滚动到底部

        console.log("Customer service reply added:", replyContent);
    } catch (error) {
        console.error("发送消息失败:", error);
        addMessage("发送失败，请重试", false); // 发送失败提示
    }
};

// 添加消息到消息列表
const addMessage = (content, isSelf) => {
    messages.value.push({
        content, // 表示消息的内容
        isSelf, // 标识消息的发送者是否是用户自己  true，表示这条消息是用户自己发送的
        avatar: isSelf ? business.value.avatar_cdn : chatAvatar, // 根据是否是自己的消息选择头像
    });
};

// 滚动到底部
const scrollToBottom = () => {
    nextTick(() => {
        // scrollTop 表示当前可视区域顶部与内容顶部之间的距离
        // scrollHeight 表示所有内容的总高度
        chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
    });
};

// 控制聊天弹窗的显示与隐藏
const toggleChatPopup = () => {
    showChatPopup.value = !showChatPopup.value;
    console.log(
        "🚀 ~ file: Chat.vue:189 ~ toggleChatPopup ~ showChatPopup.value:",
        showChatPopup.value
    );
    offset.value.x = -1; // 重置气泡位置
    clearInterval(T); // 清除定时器
};

// 关闭弹窗后重新计时
const close = () => {
    CountDown(); // 启动定时器
    console.log(
        "🚀 ~ file: Chat.vue:189 ~ toggleChatPopup ~ showChatPopup.value:",
        showChatPopup.value
    );
};

// 清空聊天记录
const Clean = () => {
    messages.value = []; // 清空消息列表
};
</script>

<style scoped>
/* 聊天容器 */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 聊天窗口 */
.chat-window {
    flex: 1;
    overflow-y: auto;
    padding: 15px; /* 增加了聊天窗口四周的间距 */
    background-color: #f5f5f5;
}

/* 每条消息 */
.message {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px; /* 增加了消息之间的间距 */
}

/* 用户自己的消息 */
.message-self {
    justify-content: flex-end;
}

/* 消息内容 */
.message-content {
    display: inline-block;
    padding: 12px 18px; /* 调整了消息内容周围的空间 */
    border-radius: 16px;
    background-color: #dcf8c6;
    max-width: 70%;
    position: relative;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 用户自己的消息内容 */
.message-self .message-content {
    background-color: #e0f7fa;
}

/* 头像 */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* 客服消息内容与头像之间的间距 */
.message .avatar {
    margin-right: 12px;
}

/* 用户消息内容与头像之间的间距 */
.message-self .avatar {
    margin-left: 12px;
}

/* 输入区域 */
.input-area {
    display: flex;
    padding: 15px; /* 增加了输入区域四周的间距 */
    background-color: #fff;
    border-top: 1px solid #e5e5e5; /* 稍微改变了边框颜色 */
    position: relative;
}

/* 发送按钮 */
.send-button {
    position: absolute;
    bottom: 20px;
    right: 10px;
    height: 40px;
    width: 80px;
}

/* 确保发送按钮有足够的空间 */
.van-field {
    padding-right: 75px;
    margin-right: 10px;
    flex: 1;
}

/* 清空按钮样式调整 */
.van-nav-bar__left {
    display: flex;
    align-items: center;
}

/* 给清空按钮的文字添加一些左边距 */
.van-icon-delete-o + span {
    margin-left: 5px;
}

/* 如果需要调整顶部导航栏的间距 */
.van-nav-bar {
    padding: 0 15px; /* 添加左右内边距 */
}
</style>
